<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="/js/drugUploader/fileuploader.css" rel="stylesheet" type="text/css">
        <link href="/js/jquery/ui/css/demos.css" rel="stylesheet" type="text/css">
        <link href="/js/jquery/ui/css/smoothness/jquery-ui-1.8.4.custom.css" rel="stylesheet" type="text/css">
        <script src="/js/drugUploader/fileuploader.js" type="text/javascript">
        </script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" />        
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"/>
        <title>Insert title here</title>
        <style type="text/css">
            .file-uploader {
                width: 300px;
            }
            
            body {
                font-size: 62.5%;
            }
            
            label, input {
                display: block;
            }
            
            input.text {
                margin-bottom: 12px;
                width: 95%;
                padding: .4em;
            }
            
            fieldset {
                padding: 0;
                border: 0;
                margin-top: 25px;
            }
            
            h1 {
                font-size: 1.2em;
                margin: .6em 0;
            }
            
            div#users-contain {
                width: 350px;
                margin: 20px 0;
            }
            
            div#users-contain table {
                margin: 1em 0;
                border-collapse: collapse;
                width: 100%;
            }
            
            div#users-contain table td, div#users-contain table th {
                border: 1px solid #eee;
                padding: .6em 10px;
                text-align: left;
            }
            
            .ui-dialog .ui-state-error {
                padding: .3em;
            }
            
            .validateTips {
                border: 1px solid transparent;
                padding: 0.3em;
            }
        </style>
        <script type="text/javascript">
            $(function(){
                function uploaderMy(){
                    var uploader = new qq.FileUploader({
                        // pass the dom node (ex. $(selector)[0] for jQuery users)
                        element: document.getElementById('file-uploader'),
                        // path to server-side upload script
                        action: '/MyLessonWeb/TestByteArrServlet',
                        sizeLimit: 10485760,
                        onSubmit: function(id, fileName){
                        },
                        allowedExtensions: ['jpg', 'jpeg', 'png', 'gif', 'exe'],
                        onComplete: function(id, fileName, responseJSON){
                            //alert(responseJSON.filePath);
                            //var intw = document.getElementById('qq-upload-list');
                            //intw.innerHTML = '<span class="qq-upload-failed-text"> completed </span>'
                        },
                    });
                }
                
                
                function updateTips(t){
                    tips.text(t).addClass('ui-state-highlight');
                    setTimeout(function(){
                        tips.removeClass('ui-state-highlight', 1500);
                    }, 500);
                }
                
                function checkLength(o, n, min, max){
                
                    if (o.val().length > max || o.val().length < min) {
                        o.addClass('ui-state-error');
                        updateTips("Length of " + n + " must be between " + min + " and " + max + ".");
                        return false;
                    }
                    else {
                        return true;
                    }
                    
                }
                
                function checkRegexp(o, regexp, n){
                
                    if (!(regexp.test(o.val()))) {
                        o.addClass('ui-state-error');
                        updateTips(n);
                        return false;
                    }
                    else {
                        return true;
                    }
                    
                }
                uploaderMy();
				});
               
        </script>
    </head>
    <body>
<div id="dialog-form" title="Create new user">
	<p class="validateTips">All form fields are required.</p>

	<form>
	<fieldset>
		<label for="YourName">Your Name</label>
		<input type="text" name="YourName" id="YourName" class="text ui-widget-content ui-corner-all" />
		<label for="CompanyName">Company Name:</label>
		<input type="text" name="CompanyName" id="CompanyName" class="text ui-widget-content ui-corner-all" />
		
		<label for="CompanyName">Company Name:</label>
		<input type="text" name="CompanyName" id="CompanyName" class="text ui-widget-content ui-corner-all" />
		
		
		<label for="email">Email</label>
		<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
		<label for="password">Password</label>
		<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
	</fieldset>
	</form>
	<br>
	<div id="file-uploader">
            <noscript>
                <p>
                    Please enable JavaScript to use file uploader.
                </p>
                <!-- or put a simple form for upload here -->
            </noscript>
    </div>
</div>


<div id="users-contain" class="ui-widget">

		<h1>Existing Users:</h1>


	<table id="users" class="ui-widget ui-widget-content">
		<thead>
			<tr class="ui-widget-header ">
				<th>Name</th>
				<th>Email</th>
				<th>Password</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>John Doe</td>
				<td>john.doe@example.com</td>
				<td>johndoe1</td>
			</tr>
		</tbody>
	</table>
</div>
<button id="create-user">Create new user</button>


		
        
    </body>
</html>